<template>
  <v-carousel :cycle="false" hide-controls>
    <v-carousel-item v-for="header in headers" :key="header.name">
      <v-container fluid>
        <h3 class="display-3 secondary--text">{{header.name}}</h3>
        <br/>
        <p class="display-1">{{header.description}}</p>
        <p v-if="header.example" class="display-1">
          <code class="example">{{header.example}}</code>
        </p>
      </v-container>
    </v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        {
          name: 'Content-Type',
          description: "提示服务器当前请求的body是什么格式和字符编码。",
          example: 'Content-Type: application/json; charset=UTF-8'
        },
        {
          name: 'Cookie',
          description: '不用我说了吧。从这里可以看到，Cookie是带在请求头里的。'
        },
        {
          name: 'Accept',
          description: '提示服务器应该用什么格式响应当前请求。可以利用这个头来实现“内容交涉（后述）”。',
          example: 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9'
        },
        {
          name: 'Accept-Encoding',
          description: '提示服务器当前客户端/浏览器支持哪些压缩格式的响应。NGINX可以利用这个头决定是否提供压缩格式的响应。通常用来降低静态文件的流量。',
          example: 'Accept-Encoding: gzip, deflate'
        },
        {
          name: 'Accept-Language',
          description: '提示服务器当前客户端/浏览器支持哪些语言。国际化的实现可以参考这个请求头。',
          example: 'Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7,zh-TW;q=0.6,ja;q=0.5'
        },
        {
          name: 'Authorization',
          description: '当前请求的身份验证信息，通常用来携带Access Token。',
          example: 'Authorization: Bearer xxxxx.yyyyy.zzzzz'
        },
        {
          name: 'User-Agent',
          description: '最恶心的头，没有之一！别去用它。',
          example: 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/69.0.3497.81 Chrome/69.0.3497.81 Safari/537.36'
        },
        {
          name: 'X-Requested-With',
          description: '提示服务器当前请求是否是AJAX请求。',
          example: 'X-Requested-With: XMLHTTPRequest'
        },
        {
          name: 'Referer',
          description: '告诉浏览器当前请求是从哪个页面发出的。安全验证的时候有时可以检查这个头，但并不保证安全。',
          example: 'Referer: http://baidu.com/'
        },
        {
          name: 'If-None-Match',
          description: '和响应头ETag配合使用，用来控制缓存（参考响应头ETag）',
          example: 'If-None-Match: W/"123456abcdef"'
        }
      ]
    }
  }
}
</script>
